<template>
    <view class="main-content">
        <swiper class="swiper" :autoplay="false" :circular="true" :duration="500" :previous-margin="'30px'" :next-margin="'30px'">>
            <swiper-item v-for="(val,key) in lists">
                <view class="swiper-item bg-white">
					<image :src="val.data" mode="scaleToFill" class="poster"></image>
				</view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
	import {
		getInviteBanner
	} from "@/api/user";
	export default {
	    data() {
	        return {
	            lists:[],
	        }
	    },
		onLoad() {
			this.getInviteBannerFun()
		},
	    methods: {
	        getInviteBannerFun() {
	        	// #ifdef H5 || APP-PLUS
	        	let path = '/'
	        	// #endif
	        	// #ifdef MP-WEIXIN
	        	let path = 'pages/index/index'
	        	// #endif
	        	uni.showLoading({
	        		title: '数据请求中'
	        	});
	        	getInviteBanner({
	        		url: path
	        	}).then(res => {
	        		if (res.code == 1) {
	        			this.lists = res.data
	        			setTimeout(function() {
	        				uni.hideLoading();
	        			}, 800);
	        		}
	        	});
	        }
	    }
	}
</script>
<style lang="scss">
	uni-page-body,
	.main-content,
	.swiper{
		height: 100%;
	}
	.main-content{
		background-color: rgba(0,0,0,.5);
	}
	.swiper-item{
		margin: 0 10rpx;
		height: 60%;
		padding: 20rpx;
		border-radius: 20rpx;
		position: relative;
		top: 50%;
		transform: translateY(-50%);
		
		.poster{
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}
	}
	.uni-bg-red{
		background-color: #000;
	}
</style>
